<template>
  <div class="question-contain">
    <!-- 头部下拉列表 -->
    <div class="top">
      <!-- 下拉列表 -->
      <van-dropdown-menu>
        <van-dropdown-item ref="mycity">
          <template #title>
            <div class="box">
              面试宝典
              <span>{{ selCity }}</span>
            </div>
          </template>
          <van-index-bar>
            <template v-for="(value, key) in cityList">
              <van-index-anchor :index="key" :key="key" />
              <van-cell
                :title="item"
                v-for="(item, index) in value"
                :key="index"
                @click="changeCity(item)"
              />
            </template>
          </van-index-bar>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <!-- 导航栏 -->
    <div class="nav">
      <div
        class="item"
        :class="{ active: index === currentIndex }"
        v-for="(item, index) in selPosition"
        :key="index"
        @click="changeIndex(index)"
      >
        {{ item.name }}
      </div>
    </div>
    <!-- 题库区域 -->
    <div class="context">
      <div class="one item">
        <i class="iconfont iconicon_mine_cuoti"></i>
        <span>常错题库</span>
      </div>
      <div class="two item">
        <i class="iconfont iconicon_mine_tikushoucang"></i>
        <span>收藏题库</span>
      </div>
      <div class="three item">
        <i class="iconfont iconicon_mine_qiyeshoucang"></i>
        <span>企业题库</span>
      </div>
      <div class="four item">
        <i class="iconfont iconicon_mine_mianjing"></i>
        <span>已答题库</span>
      </div>
      <!-- 中心刷题 -->
      <div class="center">
        <van-circle
          class="circle"
          stroke-width="70"
          layer-color="transparent"
          v-model="currentRate"
          :rate="rate"
          :speed="100"
        >
          <template>
            <div class="text">
              <div class="msg">顺序刷题</div>
              <div class="num">{{ rightNum }}/{{ totalNum }}</div>
            </div>
          </template>
        </van-circle>
      </div>
    </div>
    <!-- 记录区域 -->
    <div class="remeber">
      <div class="msg">累计收录</div>
      <div class="num">{{ totalNum }}</div>
    </div>
    <!-- 面试按钮 -->
    <div class="btn">
      <van-button
        class="mybtn"
        size="large"
        color="#00b8d4"
        @click="goInterview"
        >模拟面试</van-button
      >
    </div>
  </div>
</template>

<script>
// 导入接口方法
import { filterQuestionInfo } from '../../../api/question.js'
// 导入vuex辅助函数
import { mapState } from 'vuex'
export default {
  name: 'question',
  data () {
    return {
      // 环形条数据
      currentRate: 0,
      rate: 0,
      // 岗位列表
      cityPosition: '',
      // 城市列表
      cityList: '',
      // 选中城市
      selCity: '',
      // 选中岗位列表
      selPosition: '',
      // 当前高亮的岗位下标
      currentIndex: 0,
      // 总题数
      totalCount: 0,
      // 初始题目数
      rightNum: 0,
      totalNum: 0
    }
  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    // 跳转刷题页面
    goInterview () {
      // 带着当前的id和城市跳转
      this.$router.push(
        `/interview/${this.selPosition[this.currentIndex].id}/${this.selCity}`
      )
    },
    // 初始化动画效果
    animation () {
      const time = 1000
      var rightTime = setInterval(() => {
        this.rightNum += 1
        if (this.rightNum >= this.user.correctQuestions.length) {
          clearInterval(rightTime)
        }
      }, time / this.user.correctQuestions.length)
      var allTime = setInterval(() => {
        this.totalNum += 1
        if (this.totalNum >= this.totalCount) {
          clearInterval(allTime)
        }
      }, time / this.totalNum)
      // 环形条动画
      setTimeout(() => {
        this.rate = Math.round((100 / this.totalCount) * 100)
      }, time)
    },
    // 切换城市
    changeCity (item) {
      // 切换当前城市，岗位列表，重置选中的下标
      this.selCity = item
      this.selPosition = this.cityPosition[item]
      this.currentIndex = 0
      this.$refs.mycity.toggle()
    },
    // 切换岗位
    changeIndex (index) {
      this.currentIndex = index
    }
  },
  async created () {
    // 添加加载动画
    this.$toast({
      type: 'loading',
      message: '加载中...',
      duration: 0
    })
    const res = await filterQuestionInfo()
    // 保存数据
    this.cityPosition = res.data.data.cityPositions
    this.cityList = res.data.data.citys
    this.selCity = this.cityList['全国'][0]
    this.selPosition = this.cityPosition[this.selCity]
    this.totalCount = res.data.data.totalCount
    this.$toast.clear()
    // 开启动画
    this.animation()
  }
}
</script>

<style lang="less" socped>
.question-contain {
  height: 100vh;
  background-color: #ffffff;
  // 顶部下拉菜单样式
  .top {
    .van-index-anchor {
      background-color: turquoise;
    }
    .box {
      font-size: 18px;
      font-weight: 700;
      span {
        font-size: 12px;
      }
    }
  }
  // 导航栏样式
  .nav {
    background-color: #fff;
    display: flex;
    flex-wrap: nowrap;
    padding: 10px 15px;
    overflow: auto;
    &::-webkit-scrollbar {
      display: none;
    }
    .item {
      margin: 0 10px;
      flex-shrink: 0;
      font-size: 12px;
      background-color: #ccc;
      padding: 4px 6px;
      border-radius: 10px;
    }
    .active {
      background-color: tomato;
    }
  }
  // 题库样式
  .context {
    position: relative;
    height: 200px;
    background-color: #fff;
    margin-top: 10px;
    text-align: center;
    .item {
      font-size: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      i {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        color: #fff;
        font-size: 24px;
        line-height: 44px;
      }
    }
    .one {
      position: absolute;
      top: 17px;
      left: 42px;
      i {
        background-color: #ff4f4f;
      }
    }
    .two {
      position: absolute;
      top: 17px;
      right: 42px;
      i {
        background-color: #ffb702;
      }
    }
    .three {
      position: absolute;
      bottom: 17px;
      left: 42px;
      i {
        background-color: #00bad5;
      }
    }
    .four {
      position: absolute;
      bottom: 17px;
      right: 42px;
      i {
        background-color: #21cb81;
      }
    }
    .center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-image: url('../../../assets/编组@2x.png');
      background-size: 100%;
      .circle {
        padding: 10px;
        box-sizing: border-box;
      }
      .text {
        width: 80px;
        height: 80px;
        background-color: #f23a66;
        border-radius: 50%;
        color: #fff;
        font-size: 16px;
        .msg {
          font-size: 14px;
          font-weight: 700;
          padding-top: 20px;
        }
        .num {
          font-size: 14px;
          padding-top: 10px;
        }
      }
    }
  }

  // 累计答题
  .remeber {
    height: 130px;
    margin-top: 10px;
    background-color: #fff;
    text-align: center;
    .msg {
      padding: 20px;
    }
    .num {
      font-size: 30px;
    }
  }

  // 按钮样式
  .btn {
    padding: 15px;
  }
}
</style>
